<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/icon.css">

<div id="popUpItem" onclick="closeItem()"></div>
<div id="darkBack" onclick="closeBack()"></div>



<!-- delete confirmation dialog box -->
<div id="delConfDialog" title="Confirm">
    <p>Anda yakin?</p>
</div> 
<!-- message dialog box -->
<div id="msgDialog"><p></p></div>
<!--
<script type="text/template" id="readTemplate">
        <tr id="${handset_id}">
                <td width="30px">${nomor}</td>
                <td>${handset_model}</td>
		<td>${handset_man}</td>
		<td>${user_name}</td>
		<td>${imei}</td>
		<td>${imsi}</td>
		<td>${msisdn}</td>
                <td width="110px"><a class="updateBtn" href="${updateLink}">Perbarui</a> | <a class="deleteBtn" href="${deleteLink}">Hapus</a></td>
        </tr>
</script> 
-->

<table class="table-right-panel" width="100%" border="solid black 1px" style="margin-bottom: 20px;">
                <tr align="center" class="tr-colour2">
                    <th width="50%" align="center">Region</th>
                    <th align="center">Cluster</th>
                </tr>
                
                
                <tr align="center" class="gray">
                    <td>
                        
                        <select name="region" id="region">
                            <option>-- please select --</option>
                        <?php foreach($region as $item):?>
                            <option id="option1" value="<?php echo $item->mvalue?>"><?php echo $item->mdisplay?></option>
                        <?php endforeach?>
                        </select>
                        
                    </td>
                    <td class="readonly" align="center">
                        <select name='cluster' id='cluster'>  
                        </select>
                    </td>
                    
                    
                </tr>
            </table>

<!-- edited by : alfin akhret
SSP datattables -->
<div id="wrapRecord">
<table id="records" class="handsetRecord">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
</div>
<!--  -------------->

<script type="text/javascript">


$(function(){
    $("#cluster").change(function(){
        //alert('sdg');
        $(".handsetRecord").remove();
        $(".dataTables_wrapper").remove();    
        //alert('tewt');
        add_tuple = "<table id='records' class='handsetRecord'>"+
                        "<thead>"+
                        "</thead>"+
                        "<tbody>"+
                        "</tbody>"+
                    "</table>";
        $('#wrapRecord').append(add_tuple);
        var clusterID = $("#cluster").val();
        readUsers(clusterID);       
    });
});

function closeBack()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}

function closeItem()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}


$(document).keypress(function(e){
    if(e.keyCode==27){
        $("#darkBack").fadeOut("slow"); 
        $("#popUpItem").fadeOut("slow");   
    }
});

jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }

var readUrl   = '<?=base_url();?>index.php/merchandising/read2',
    updateUrl = '<?=base_url();?>index.php/handset/update',
    delUrl    = '<?=base_url();?>index.php/handset/delete',
    delHref,
    updateHref,
    updateId;


$( function() {
    
    //readUsers();

    $( '#msgDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                $( this ).dialog( 'close' );
            }
        }
    });
    
    $( '#delConfDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'No': function() {
                $( this ).dialog( 'close' );
            },
            'Yes': function() {
                //display ajax loader animation here...
                $( '#ajaxLoadAni' ).fadeIn( 'slow' );
                $( this ).dialog( 'close' );
                $.ajax({
                    url: delHref,
                    success: function( response ) {
                        //hide ajax loader animation here...
                        $( '#ajaxLoadAni' ).fadeOut( 'slow' );
                        
                        $( '#msgDialog > p' ).html( response );
                        $( '#msgDialog' ).dialog( 'option', 'title', 'Success' ).dialog( 'open' );
                        
                        $( 'a[href=' + delHref + ']' ).parents( 'tr' )
                        .fadeOut( 'slow', function() {
                            $( this ).remove();
                        });
                        
                    } //end success
                });
            } //end Yes
        } //end buttons
    }); //end dialog
    
    
    $( '#records' ).delegate( 'a.deleteBtn', 'click', function() {
        delHref = $( this ).attr( 'href' );
        $( '#delConfDialog' ).dialog( 'open' );
            return false;
    }); //end delete delegate
    // --- Create Record with Validation ---
}); //end document ready


// function readUsers() {
//     //display ajax loader animation
//     $( '#ajaxLoadAni' ).fadeIn( 'slow' );
    
//     $.ajax({
//         url: readUrl,
//         dataType: 'json',
//         success: function( response ) {
//             var j=1;
//             for( var i in response ) {
//                 response[ i ].updateLink = updateUrl + '/' + response[ i ].handset_id;
//                 response[ i ].deleteLink = delUrl + '/' + response[ i ].handset_id;
//                 response[ i ].nomor = j;
//                 j++;
//             }
//             //clear old rows
//             $( '#records > tbody' ).html( '' );
            
//             //append new rows
//             $( '#readTemplate' ).render( response ).appendTo( "#records > tbody" );
            
//             //apply dataTable to #records table and save its object in dataTable variable
//             if( typeof dataTable == 'undefined' )
//                 dataTable = $( '#records' ).dataTable({"bJQueryUI": true});
            
//             //hide ajax loader animation here...
//             $( '#ajaxLoadAni' ).fadeOut( 'slow' );
//         }
//     });

    function readUsers(clusterID)
    {
       
        $('.handsetRecord').dataTable({
                "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
                "sAjaxSource": readUrl+'/'+clusterID, //data source
                "sAjaxDataProp": "aaData", //variabel yg menampung data table
                "bServerSide": true, //serverside processing true
                "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
                //"sPaginationType": 'fullNumbers',
                "bRetrieve": true,
                "bPaginate": true,
                "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
                    {"mDataProp": "tanggal", "sTitle": "tanggal", "bSearchable":false}, 
                    {"mDataProp": "partner_name", "sTitle": "partner_name"}, 
                    {"mDataProp": "keyword", "sTitle": "keyword"},
                    {"mDataProp": "pic_type", "sTitle": "pic_type"},
                    {"mDataProp": "picture", "sTitle": "picture"}
                    //{"mDataProp": null, "sDefaultContent": "Edit", "sTitle": "Action", "aTargets": [ -1 ]}
                    //"tanggal", "partner_name", "keyword", "pic_type", "picture"

                ],
                "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
                {
                    $(nRow).find('td').eq(0).before('<td>'+iDisplayIndex+'</td>');

                    $(nRow).find('td').eq(5).each(function(){
                        $(this).html('<a id="'+aaData[4]+'" onclick="popUp(this.id)" target="_blank"><img style="width:50px" src="<?php echo base_url()?>'+aaData[4]+'"/></a>');
                    });
                    return nRow;
                }
        });
        
        $('.handsetRecord thead tr').find('th').eq(0).before('<th class="ui-state-default">No</th>');
    
} // end readUsers

function popUp(urlImg)
{
    var wrapperHeight = $('#content').height();
    $('#darkBack').css({'height': ($(document).height())+'px'});
    var urlBase = '<?php echo base_url()?>';
    $("#darkBack").css({"opacity" : "0.7"})
        .fadeIn("slow");
    
    $("#popUpItem").css({"opacity" : "1"})
        .fadeIn("slow");    
        
    //$("#popUpItem").html("<img src='"+urlBase+"file/uploads/"+urlImg+"' width='400px'/>")
    $("#popUpItem").html("<img src='"+urlBase+urlImg+"' width='400px'/>")
                   .center()
                   .fadeIn("slow");
    //alert(wrapperHeight);
}
</script>
